<html>
	<head>
	 	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<script type="text/javascript" src="resources/script/js/tools/markdown.min.js"></script>
		<script type="text/javascript" src="resources/script/js/tools/highlight.min.js"></script>
		<script type="text/javascript" src="resources/script/js/tools/java.min.js"></script>
 		<link rel="stylesheet" href="resources/css/hybrid.min.css"/>
 		<style type="text/css">
 			p{
 				margin:0px;
 				padding:0px;
 			}
 			h1{
 				margin:0px;
 				padding:0px;
 			}
 			pre{
 				margin:0px;
 			}
 			#input{
 				float:left;
 				margin-left:100px;
 				width:535px;
 				height:477px;
 				background-color:#f9fafc;
 				border:1px;
 			}
 			#view{
 				float:left;
 				width:100%;
 				height:100%;
 				border-radius:5px;
 				border:1px solid #666;
 				overflow-x:auto;
 			}
 			.side{
 				font-size:12px;
 			}
 			.side-btn{
 				display:inline-block;
 				margin-left:100px;
 				border: 1px solid #258fb8;
 				background-color:#258fb8;
 				color:#fff;
 				border-radius:1px;
 				padding:4px 12px;
 			}
 			.side-span{
 				
 			}
 			.common{
 				display:inline-block;
 				position:absolute;
 			}
 		</style>
		<!-- <link rel="stylesheet" href="resources/css/default.css"/> -->
		 <!--<link rel="stylesheet" href="resources/css/github.min.css"/>-->
	</head>
	<body>
		<div style="height:40px" class="side">
			<input class="side-btn" type="button" value="导入图片"/>
			<span class="side-span" ><input type="checkbox" checked="checked"/>生成概述</span>
			<span class="side-span" ><input type="checkbox" checked="checked"/>生成标题</span>
		</div>
		<div class="common" style="width:535;height:477px;margin-left:700px;word-break:break-word;word-wrap:break-word;">
			<pre id="view" style=""></pre>
		</div>
		<textarea id="input" class="common" style="resize:none;overflow:auto;font-family:Consolas,Liberation Mono,Courier,monospace;"></textarea>
		<!-- <script type="text/javascript">hljs.initHighlightingOnLoad();</script> -->
		<script type="text/javascript">
			var editor = function(input,view){
				function updateAndView(){
					var html = input.value;
					var reg = new RegExp("\n","g");
					var codeReg = new RegExp("([`]+)([^`]*)\\1","g");
					html = html.replace(codeReg,function($0,$1,$2){
						var count = 0;
						$2 = 0+" "+$2;
						$2 = $2.replace(reg,function($0){
							count++;
							return $0+count+" ";
						});
						return $1+$2+$1;
					});
					view.innerHTML = markdown.toHTML(html,'Maruku');
					var nodes = view.getElementsByTagName('code');
				 	if(nodes.length>0){
						for(var i = 0;i<nodes.length;i++){
							if(nodes[i].innerHTML != ""){
								hljs.highlightBlock(nodes[i]);
							}
						}
					}
				}
				input.oninput = updateAndView;
			};
			var instance = new editor(document.getElementById("input"),
					document.getElementById("view"));
		</script>
	</body>
</html>